<template>
  <div id="MainShow">
  <el-collapse-transition>
    <div  v-show="ShowMsg">
      <el-row :gutter="24" type="flex" justify="center" class="transition-box">
        <el-col :span="12">
            <el-card>
              <div slot="header" class="clearfix">
                <span>转换结果</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                class="cpoy"
                v-clipboard:copy="UrlRes" v-clipboard:success="onCopy" v-clipboard:error="onError"
                >
                复制结果
                </el-button>
              </div>
              <p><i class="el-icon-link"> {{ inputUrl }}</i></p>
              <el-divider></el-divider>
              <p><i class="el-icon-s-promotion text"> <el-link target="_blank" :underline="false" :type="PostStatus ? 'success' : 'danger'" :href="UrlRes">{{ UrlRes }}</el-link></i></p>
              <div>
              </div>
            </el-card>
        </el-col>
      </el-row>
    </div>
  </el-collapse-transition>
  </div>
</template>

<script>

export default {
  props: {
    UrlRes: String,
    inputUrl: String,
    ShowMsg: Boolean,
    PostStatus: Boolean
  },
  methods: {
    onCopy (e) {
      this.$notify({
        title: '复制成功',
        message: '链接已复制到粘贴板中',
        type: 'success'
      })
    },
    onError () {
      this.$error({
        title: '复制失败',
        message: '链接无法复制到粘贴板中'
      })
    }
  }
}
</script>

<style>
.el-card {
    font-size: 14px;
    text-align: left;
  }
</style>
